import React, { Component } from 'react'
import routes from './router/routes'
import RouterView from './router/routerView'
import RouterLink from './router/routerLink'
import './App.css'
import MyWithRouter from './views/WithRouter'
//app 模拟withRouter
/*
使用高阶组件实现路由守卫和拦截
全局：银行App，CRM后台管理系统 财务管理 ，只要用户访问就必须登录
局部：淘宝 京东 不登录也可以访问 （结算时需要登录 个人中心）
*/
class App extends Component {
  //页面挂载完毕，判断登录验证是否有token 
  componentDidMount () {
    this.test()
  }
  //验证函数
  test = () => {
    //模拟存储token 存在本地存储中
    const token = localStorage.getItem('token')
    //严格判断 强制登录 全局守卫 如果是登录不需要跳转
    const pathname = this.props.location.pathname
    if (pathname !== '/login') {
      if (!token) {  //初次登录验证
        this.props.history.push('/login')
      }
    }
  }
  render () {
    return (
      <div>
        <div>
          <RouterLink routes={routes}></RouterLink>
        </div>
        {/* 传参设置css */}
        <RouterView routes={routes} activeCss={'pink'}></RouterView>
      </div>
    )
  }
}

export default MyWithRouter(App)
